<template>
  <div id="page-index">
    <!-- 这是首页 page-index -->
    <!-- banner模块 -->
    <template>
      <el-carousel :interval="5000" arrow="always" height="23.89rem">
        <el-carousel-item v-for="item in images" :key="item">
          <img class="bannerImg" :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </template>
    <!-- 三个模块 -->
    <div class="three-part">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        title-active-color="#1989fa"
        line-width="0"
      >
        <van-tab v-for="item in tabList" :key="item.name" :title="item.name">
          <div class="three-in">
            <component :is="item.com" :fatherData="item.fatherData"></component>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 返回顶部按钮 -->
    <template>
      <el-backtop :bottom="100" :right="160">
        <div
          style="
             {
              height: 100%;
              width: 100%;
              background-color: #f2f5f6;
              box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
              text-align: center;
              line-height: 40px;
              color: #1989fa;
              border-radius: 100px;
            }
          "
        >
          <i class="el-icon-caret-top"></i>
        </div>
      </el-backtop>
    </template>
  </div>
</template>

<script>
import Epidemic from './user-index/N-Epidemic/index.vue'
import Situation from './user-index/E-Situation/index.vue'
import Content from './user-index/C-Content/index.vue'
export default {
  components: { Epidemic, Situation, Content },
  data() {
    return {
      // banner 图片模块
      images: [
        'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/3ec6ee4e452085a74db8e21d104dc5e9d0a0f103dbd61aa8e8335b3bfec688dcc8b9504348119b1e5d88ec9322c38182?pictype=scale&from=30013&version=3.3.3.3&fname=1.png&size=750',
        'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/76f26ed2d3d24a7232889b43fef7a895cc0729ea48d3c942ec1b4aea5861eadd2d5e03ed1260bd021b4d702772341b3b?pictype=scale&from=30013&version=3.3.3.3&fname=2.png&size=750',
        'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/75e16b84846415281b01c078fcc727fb614825cf10e0d176d2ccf47f5c91119aa051432e251395cbe2e8f56529ab2f2a?pictype=scale&from=30013&version=3.3.3.3&fname=3.png&size=750',
        'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/cfa1afbb071844f9e8a7b0b5013add335f72b35b4963edf516eee284a72f3c0f40170fd046e0b3d9a10ea240c1fbbac8?pictype=scale&from=30013&version=3.3.3.3&fname=4.png&size=750',
        'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/9c32feae68e95e29c7f9fa3aed19f4e9e3622ad7dc5bbd0fbd90587d9314e6a4454bbe0db11ea69dc98cfbcabe7fb7ce?pictype=scale&from=30013&version=3.3.3.3&fname=5.png&size=750',
      ],
      // 三个模块
      active: 0,
      tabList: [
        {
          com: 'Epidemic',
          name: '全国疫情',
          fatherData: {
            state: null,
            msg: {},
          },
        },
        {
          com: 'Content',
          name: '社区内容',
          fatherData: {
            state: null,
            msg: {},
          },
        },
        {
          com: 'Situation',
          name: '疫情动态',
          fatherData: {
            state: null,
            msg: {},
          },
        },
      ],
      // temp: null,
      newsPage: 0,
      newsTotal: 10,
      newsData: null,
    }
  },
  watch: {
    newsTotal: {
      handler(val) {
        this.getEpidemicNews()
      },
    },
  },
  methods: {
    getEpidemic() {
      const url =
        'https://news.sina.com.cn/project/fymap/ncp2020_full_data.json?_=1675261642100&callback=jsoncallback'
      this.$jsonp(url)
        .then((res) => {
          // console.log(res)
        })
        .catch((err) => {
          // console.log(err)
        })
    },
    // 疫情数据
    jsoncallback(data) {
      this.tabList[0].fatherData.state = 200
      this.tabList[0].fatherData.msg = data.data
    },
    // 获取疫情动态数据
    getEpidemicNews() {
      const url =
        'https://shankapi.ifeng.com/feedflow/ifengComplaint/dynamic/yiqing_360226/' +
        this.newsPage +
        '/' +
        this.newsTotal +
        '/callback3?callback=callback3'
      this.$jsonp(url)
        .then((res) => {
          // console.log(res)
        })
        .catch((error) => {
          // console.log(error)
        })
    },
    // 新闻列表
    callback3(res) {
      this.newsTotal = res.total
      this.newsData = res
      this.tabList[2].fatherData.state = 200
      this.tabList[2].fatherData.msg = res.data.slice(
        this.newsPage,
        this.newsTotal,
      )
    },

    // 下载文件
    // upload() {
    //   var file = new File([this.temp], 'ncp2020_full_data_upload.txt', {
    //     type: 'text/plain;charset=utf-8',
    //   })
    //   this.saveAs(file)
    // },
  },
  created() {
    // 获取全国疫情数据
    this.getEpidemic()
    // 获取疫情动态数据
    this.getEpidemicNews()
  },
  mounted() {
    window.callback3 = (data) => {
      this.callback3(data)
    }
    window.jsoncallback = (data) => {
      this.jsoncallback(data)
    }
  },
}
</script>

<style lang="less" scoped>
#page-index {
  .bannerImg {
    width: 100%;
    position: absolute;
    top: -10%;
  }
  .three-part {
    margin-bottom: 2.5rem;
  }
}
.three-in {
  margin-bottom: 0.625rem;
  & > div {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 0.3125rem;
    // background-color: red;
    // overflow: hidden;
  }
}
</style>
